<template>
  <a @click="dialog = true">
    <span>查看</span>
    <a-modal v-model="dialog" title="设置原因" @ok="submit" class="text-xl">
      <div class="flex">
        <span>违约原因：</span>
        <a-radio-group v-model="defaultReason" :disabled="Archive == 1">
          <a-radio value="欠缴月息">
            欠缴月息
          </a-radio>
          <a-radio value="欠缴还款">
            欠缴还款
          </a-radio>
          <a-radio value="其他">
            其他
          </a-radio>
          <a-input style="width:100px" v-model="others" :disabled="defaultReason != '其他'" />
        </a-radio-group>
      </div>
      <div class="flex mt-4">
        <span>备注：</span><a-textarea class="text" :rows="4" v-model="defaultReasonRemark" :disabled="Archive == 1" />
      </div>
    </a-modal>
  </a>
</template>
<script>
import { updataDfault, getDetailList } from '@/api/common'
export default {
  name: 'setReason',
  props: ['record'],
  data() {
    return {
      defaultReason: '欠缴月息',
      defaultReasonRemark: '',
      others: '',
      dialog: false,
      Archive: 0
    }
  },
  watch: {
    dialog(v) {
      if (v) {
        this.getData()
      }
    }
  },
  methods: {
    async submit() {
      if (this.defaultReasonRemark) {
        const _form = {
          defaultReason: this.defaultReason == '其他' ? this.others : this.defaultReason,
          defaultReasonRemark: this.defaultReasonRemark
        }
        await updataDfault(this.record.defaultDetailId, _form)
        this.dialog = false
        this.$emit('update')
      } else {
        this.$message.error('请输入备注')
      }
    },
    async getData() {
      this.defaultReason =
        this.record.defaultReason != '欠缴月息' && this.record.defaultReason != '欠缴还款'
          ? '其他'
          : this.record.defaultReason
      this.others =
        this.record.defaultReason != '欠缴月息' && this.record.defaultReason != '欠缴还款'
          ? this.record.defaultReason
          : ''
      this.defaultReasonRemark = this.record.defaultReasonRemark ? this.record.defaultReasonRemark : ''
      const id = this.record.projectId
      const r = await getDetailList(id)
      this.Archive = r.result.data.Archive
    }
  }
}
</script>
<style lang="css" scoped>
.text {
  resize: unset;
  vertical-align: top;
}
</style>
